<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 画布元素 -->
    <canvas id="canvas"></canvas>
</body>
<script>
let canvas = document.getElementById('canvas')
canvas.style.background = 'black'
// 浏览器渲染出画布宽高
canvas.style.width = 600 + 'px'
canvas.style.height = 600 + 'px'
// 绘制画布真实宽高
canvas.width = 1200
canvas.height = 1200
let context = canvas.getContext('2d');
// context.scale(2, 2)

let time = 0
function draw() {
    context.clearRect(0,0,canvas.width,canvas.height); // 清除所选区域
    // 绘制太阳 
    context.beginPath() // 开始路径绘制
    context.arc(600, 600, 100, 0, Math.PI*2, true)
    context.fillStyle = 'red' // 图形填充色
    context.fill() // 进行填充
    // 绘制地球轨道
    context.beginPath()
    context.arc(600, 600, 300, 0, Math.PI*2, true) // 圆心(300,300) 半径为150的圆环
    context.strokeStyle = 'rgb(255,255,255,0.3)'
    context.stroke()
    context.closePath()

    context.save(); // 保存当前状态

    var angle=time*Math.PI/180/8;
    context.translate(600,600); // 起始点偏移量,太阳中心
    context.rotate(angle);

    context.translate(300,0); // 地球，月球轨道中心
    // 地球
    context.beginPath()
    context.arc(0,0,40,0,2*Math.PI,false);
    context.fillStyle = 'skyblue'
    context.strokeStyle = 'skyblue'
    context.fill()

    // 月球轨道
    context.beginPath()
    context.arc(0, 0, 100, 0, Math.PI*2, true)
    context.strokeStyle = 'rgb(255,255,255,0.3)'
    context.stroke()
    context.closePath()

    context.rotate(-8*angle);

    // 月球
    context.beginPath()
    context.arc(100,0,20,0,2*Math.PI,false);
    context.fillStyle = '#fff'
    context.fill()

    context.restore(); // 恢复状态
    time++
}
setInterval(draw,30)
</script>
</html>